<template>
	<view>
		<view class="gl-container">
			<view class="gl-header">
				<view class="gl-header-left">
					<uni-search-bar v-model="search" placeholder="关键字搜索" cancelButton="none"
						@confirm="getSearch"></uni-search-bar>
				</view>
				<view class="gl-header-right">
					<!--
					<view class="gl-button gl-button-success">
						<uni-icons type="folder-add" size="18" color="#fff"></uni-icons>
						<text style="font-size: small;">新增</text>
					</view>
					<view class="gl-button gl-button-warning">
						<uni-icons type="compose" size="18" color="#fff"></uni-icons>
						<text style="font-size: small;">编辑</text>
					</view>
					<view class="gl-button gl-button-error">
						<uni-icons type="trash" size="18" color="#fff"></uni-icons>
						<text style="font-size: small;">移除</text>
					</view>
					-->
					<view class="gl-button gl-button-base" hover-class="button-base-hover" :hover-stay-time="100"
						@click="refresh">
						<uni-icons type="reload" size="18" color="#fff"></uni-icons>
						<text style="font-size: small;">刷新</text>
					</view>
				</view>
			</view>

			<scroll-view scroll-y="true" class="scroll-Y">
				<uni-table stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center" width="30">ID</uni-th>
						<uni-th>昵称</uni-th>
						<uni-th>姓名</uni-th>
						<uni-th width="50">性别</uni-th>
						<uni-th width="160">身份证</uni-th>
						<uni-th width="80">手机号</uni-th>
						<uni-th width="120">邮箱</uni-th>
						<uni-th width="160">创建时间</uni-th>
						<uni-th>状态</uni-th>
						<uni-th>操作</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tmpData" :key="index">
						<uni-td>{{item.id}}</uni-td>
						<uni-td>{{item.nicename}}</uni-td>
						<uni-td>{{item.basename}}</uni-td>
						<uni-td width="50">{{item.gender?'男':'女'}}</uni-td>
						<uni-td width="160">{{zipStr(item.idcode) ?? 'none'}}</uni-td>
						<uni-td width="80">{{zipStr(item.phone) ?? 'none'}}</uni-td>
						<uni-td width="120">{{item.email ?? 'none'}}</uni-td>
						<uni-td width="160">{{item.created}}</uni-td>
						<uni-td>
							<switch :checked="Boolean(item.status)" @change="status_good(item);"
								:disabled="item.id === sConf.auth.attrs.id" style="transform:scale(0.7)" />
						</uni-td>
						<uni-td>
							<view class="gl-link gl-link-base">查询</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</scroll-view>

			<view class="gl-footer">
				<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
					@change="hasTmpData" />
			</view>

		</view>
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	export default {
		name: "sub-staff-list",
		data() {
			return {
				sConf: getApp().globalData,
				count: null, // 记录数
				size: 20, // 页大小
				page: 1, // 当前页
				search: '',
				tmpData: null,
			};
		},
		mounted() {
			console.log('mounted sub-staff-list');
			this.refresh();
		},
		methods: {
			logout() {
				this.$emit('logout');
			},
			refresh() {
				console.log('refresh');
				// console.log(this.sConf.auth);
				this.hasTmpData();
			},
			getSearch(e) {
				console.log(e);
			},
			hasTmpData() {
				console.log('拉取数据');
				let data = {
					'page': this.page,
					'size': this.size
				};
				utils.adminGetStaffList(this.sConf.host, this.sConf.auth.token, data).then((res) => {
					console.log('请求成功', res);
					if (res.rescode === 401) {
						this.logout();
					}
					if (res.rescode === 200) {
						this.tmpData = res.resmsg;
						this.count = res.count;
						this.size = res.size;
					}
				});
			},
			status_good(e) {
				console.log('修改状态', e);
				let data = {
					'status': e.status ? 0 : 1
				}
				utils.adminPatchStaffList(this.sConf.host, this.sConf.auth.token, data, e.id).then((res) => {
					console.log('请求成功', res);
					if (res.rescode === 401) {
						this.logout();
					}
					if (res.rescode === 200) {}
				});
			},
			zipStr(e) {
				if(e === null){
					return 'none'
				}
				let symbol = '*';
				if (e.length === 11) {
					return e.replace(/(\d{3})\d{4}(\d{2})/, `$1${symbol}${symbol}${symbol}${symbol}$2`)
				} else if (e.length === 18 || e.length === 15) {
					return e.replace(/(\d{12}).*/, `$1${symbol}${symbol}${symbol}${symbol}`)
				} else {
					return e;
				}
			}
		}
	}
</script>

<style lang="scss">

</style>